<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Captive</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>


<script>

	var init = 5;
	
	$(document).ready(
		function() {
			document.getElementById("dialog").style.display="inherit";
			document.getElementById("background").style.display="inherit";
			document.getElementById("dialog").innerHTML = "(At a hotel near the harbor.)";
			$("#dialog").click(dialog1);
		}
	);
	
	function dialog1()
	{
		document.getElementById('audiotag1').play();
		document.getElementById("dialog").style.display="none";
		setTimeout(pickup, 4000);
		$("#dialog").unbind('click');
	}
	
	function pickup() {
		
		document.getElementById('audiotag1').pause();
		document.getElementById("dialog").style.display="inherit";
		document.getElementById("dialog").innerHTML = "I say: <br/>Hello?";
		$("#dialog").click(dialog2);
	}
	
	function dialog2()
	{
		$("#dialog").unbind('click');
		document.getElementById("peopleimage").src="images/police.png";
		document.getElementById("dialog").innerHTML = "Policeman says: <br/>Mr. Jackson?";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog3);
		}
	}
	
	function dialog3()
	{
		$("#dialog").unbind('click');
		document.getElementById("peopleimage").src="images/blank.png";
		document.getElementById("dialog").innerHTML = "I say: <br/>Yes?";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog4);
		}
	}
	
	function dialog4()
	{
		$("#dialog").unbind('click');
		document.getElementById("peopleimage").src="images/police.png";
		document.getElementById("dialog").innerHTML = "Policeman says: <br/>Mr. Jackson, we're sorry to inform you that we still haven't found your son's body. The chance of him surviving is very small at this point, but the rescue team is still searching for your son.";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog5);
		}
	}
	
	function dialog5()
	{
		$("#dialog").unbind('click');
		document.getElementById("peopleimage").src="images/blank.png";
		document.getElementById("dialog").innerHTML = "I say: <br/>Thank you. Please let me know when you find him. (hang up)";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog6);
		}
	}
	
	function dialog6()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "It's all my fault...Jimmy, I'm really sorry....";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog7);
		}
	}
	
	function dialog7()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "I wish I could go back in time and save you.....";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog10);
		}
	}
	
	function dialog10()
	{
		$("#dialog").unbind('click');
		$("#dialog").fadeOut(5000,nextscene);
	}
	
	
	
	function nextscene()
	{
			window.location = "theend.php";
	}
	
	
</script>



</head>

<body>


<div id="container">
	<div id="background"><img src="images/hotel.jpg" /></div>
	<div id="dialog">
	</div>
	<div id="people"><img id="peopleimage" src=""></div>
</div>


<audio id="audiotag1" src="audios/phone_ringing.mp3" preload="auto"></audio>

</body>
</html>